<template>
    <LeftRightLayoutContainer type="left">
        <template #default>
            <div class="panel-big-title">环境现状</div>
            <BasePanel
                width="100%"
                height="300px"
                title="空气质量指数"
                :class="{ 'base-panel-checked': globalStore.currentPopName === 'TestPop' }"
                @click="handleClick"
            >
                示例面板，包含点击事件
            </BasePanel>
            <BasePanel
                width="100%"
                height="300px"
                title="示例面板"
                class="mt-20px"
            >
            </BasePanel>
        </template>
    </LeftRightLayoutContainer>
</template>

<script setup lang="ts">
import LeftRightLayoutContainer from '@/components/LeftRightLayoutContainer/index.vue'
import BasePanel from '@/components/BasePanel/index.vue'
import { useGlobalStore } from '@/store/global'
const globalStore = useGlobalStore()

// 点击面板
const handleClick = () => {
    globalStore.togglePopInfo({
        popName: 'TestPop',
        popData: null,
    })
}
</script>

<style lang="scss" scoped>
</style>
